import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_jdk_test/pages/Tabs.dart';
//命名路由的配置导入

import 'pages/searches.dart';


//导入外部数据文件
import 'res/listData.dart';

///注意如果在android sdk manager 里面测试远程图片显示不出来说明模拟器没有网络
///声明: 在android sdk manager 中要查看效果需要调用本地图片,因为没有网络

//入口方法
void main() => runApp(Myapp());

//StatefulWidget 是有状态的组件
//StatelessWidget 是无状态的组件

//Container 容器组件

//根组件


class Myapp extends StatelessWidget {

  //路由传值
  final routes = {
    '/searches': (context,{arguments}) => Searches(arguments:arguments),
  };

  @override
  Widget build(BuildContext context) {
    //MaterialApp 一般作为顶层widget 使用,它封装了应用程序实现所需要的一些widget
    return MaterialApp(
      //home 页面信息
      //Scaffold 属于脚手架包含基本的可视化布局结构
      home: BottomNavigationBarClass(),


      ///命名路由传值
      // ignore: missing_return
      onGenerateRoute: (RouteSettings settings) {
        //统一处理
        final String name = settings.name;
        final Function pageContentBuilder = this.routes[name];

        if (pageContentBuilder != null) {
          if (settings.arguments != null) {

            print('这个是setinging.name 的值'+settings.name);

            final Route route = MaterialPageRoute(
                builder: (context) =>
                    pageContentBuilder(context, arguments: settings.arguments));
            return route;
          }else{
            final Route route=MaterialPageRoute(
              builder: (context)=>pageContentBuilder(context)
            );
            return route;
          }
        }
      },

      ///命名路由
      // routes: {
      //   '/searches':(context)=>Searches(),
      // },

      //配置应用主题
      theme: ThemeData(
        //应用主题颜色
        primarySwatch: Colors.cyan,
      ),
    );
  }
}


/// 自定义组件

//无状态的组件
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        //必传参数,内容
        "Hello",
        //文字显示方向
        textDirection: TextDirection.ltr,
        //文字显示风格
        style: TextStyle(
          //文字大小
          fontSize: 50.0,
          //文字颜色 可以指定也可以选择使用RGB 的方式
          color: Colors.yellow,
          //color: Color.fromRGBO(200, 200, 200, 0.5),
        ),
      ),
    );
  }
}

/// Container 和 Text 的属性使用
class HomeContent1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      //Container 容器组件
      child: Container(
        child: Text(
          '我是asdfasdfasd',

          ///文字过多溢出处理
          //文字过多溢出处理 ellipsis显示为...
          // overflow: TextOverflow.ellipsis,
          //需要配合maxLines 控制行数
          //overflow: TextOverflow.fade,
          //maxLines: 1,
          //过多文字直接裁剪 需要maxLines 配合控制行数
          overflow: TextOverflow.clip,
          maxLines: 1,

          ///设置字体的缩放,显示的倍率
          textScaleFactor: 2,

          ///文字显示方向 right/center/left
          textAlign: TextAlign.left,

          ///设置文本的样式
          style: TextStyle(
            //设置文本大小
            fontSize: 16.0,
            //字体颜色
            color: Colors.blue,
            //字体加粗
            fontWeight: FontWeight.w900,
            //字体倾斜
            fontStyle: FontStyle.italic,

            ///字体的样式风格
            //lineThrough删除线
            //underline 下划线
            //overline 上划线
            decoration: TextDecoration.underline,

            //设置线的颜色
            decorationColor: Colors.amberAccent,

            //设置线为虚线 dashed
            //设置线为波浪线 wavy
            //设置线为小虚线 dotted
            //设置线为双行 double
            //设置线为单行实线 solid
            decorationStyle: TextDecorationStyle.dashed,

            //设置字间距
            letterSpacing: 3.1,
          ),
        ),
        height: 300.0,
        width: 300.0,
        //背景颜色
        decoration: BoxDecoration(
          color: Colors.red,
          //边框的颜色
          border: Border.all(color: Colors.blue, width: 2.0),

          ///边框圆角
          borderRadius: BorderRadius.all(
            Radius.circular(20),
            // Radius.elliptical(8, 8),
            //没有圆角,默认值
            // Radius.zero,
          ),
        ),
        //设置外边距
        margin: EdgeInsets.all(1.0),
        //设置内边距
        //padding: EdgeInsets.all(1.0),
        //左上右下 设置内边距
        padding: EdgeInsets.fromLTRB(10, 5, 5, 0),

        ///设置变换
        //transform: Matrix4.translationValues(2, 2, 2),
        //沿Y轴倾斜0.3弧度
        //transform: Matrix4.skewY(0.3),
        //缩放
        transform: Matrix4.diagonal3Values(1, 0.7, 3),

        ///控制显示位置
        //bottomCenter 显示在底部
        //bottomLeft 显示在底部的左侧
        //bottomRight 显示在底部的右侧
        //topRight 显示在顶部右侧
        //topCenter 显示在顶部中间
        //topLeft   显示在顶部左侧
        alignment: Alignment.topLeft,
      ),
    );
  }
}

/// 显示图片的组件
class HomeContent2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var images = "http://pic31.nipic.com/20130711/8952533_164845225000_2.jpg";
    return Center(
      child: Container(
        height: 300.0,
        width: 300.0,

        //显示线上的图片
        child: Image.network(
          images,
          //图片在容器显示位置
          //topLeft 左上角
          //bottomLeft 左下角
          alignment: Alignment.topCenter,
          //颜色配置,需配合使用
          //color: Colors.redAccent,
          //colorBlendMode: BlendMode.color,
          fit: BoxFit.contain,
        ),

        decoration: BoxDecoration(
          color: Colors.blue,
        ),
      ),
    );
  }
}

///实现圆角图片
class HomeContent3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 300.0,
        width: 300.0,
        decoration: BoxDecoration(
          color: Colors.yellow,
          //实现圆形
          // borderRadius: BorderRadius.all(
          //   Radius.circular(150),
          // ),

          //实现圆形图片
          borderRadius: BorderRadius.circular(150),
          image: DecorationImage(
            image: NetworkImage(
                'http://pic31.nipic.com/20130711/8952533_164845225000_2.jpg'),
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

///实现圆角图片2
class HomeContent4 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: ClipOval(
          child: Image.network(
            'http://pic31.nipic.com/20130711/8952533_164845225000_2.jpg',
            height: 100.0,
            width: 100.0,
            fit: BoxFit.cover,
          ),
        ),
        decoration: BoxDecoration(
          color: Colors.yellow,
        ),
      ),
    );
  }
}

///加载本地图片
// ignore: must_be_immutable
class HomeContent5 extends StatelessWidget {
  //定义图片位置
  var images = 'images/1.jpg';

  @override
  Widget build(BuildContext context) {
    return Center(
      //容器
      child: Container(

        ///设置圆角
        child: ClipOval(
          //访问本地图片
          child: Image.asset(
            images,
            fit: BoxFit.cover,
          ),
        ),
        //设置宽高
        width: 300.0,
        height: 300.0,
      ),
    );
  }
}

///列表展示(垂直列表)
// ignore: must_be_immutable
class HomeContent6 extends StatelessWidget {
  //定义图片位置
  var images = 'images/1.jpg';

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.all(10.0),
      children: <Widget>[
        ListTile(
          //给标题加入图标
          leading: Icon(
            //图标
            Icons.account_balance,
            //图标的颜色
            color: Colors.redAccent,
            //图标的大小
            size: 10.0,
          ),

          title: Text(
            '这个是标题',
            style: TextStyle(
              fontSize: 18.0,
            ),
          ),
          subtitle: Text('这个是二级标题,显示文字'),
        ),
        ListTile(
          //给标题加入图标
          leading: Icon(
            Icons.add_a_photo,
          ),
          title: Text('这个是显示图片'),
          subtitle: Image.asset(images),
        ),

        //这个是实现标题显示图片
        ListTile(
          //给标题加入图片
          leading: Image.asset(images),
          title: Text('这个是显示图片'),
          subtitle: Image.asset(images),
        ),

        //这个是实现标题和结尾显示图片
        ListTile(
          //给标题加入图片
          leading: Image.asset(images),
          title: Text('这个是显示图片'),
          subtitle: Text("这个是测试文本,测试文本,测试文本"),

          // 这个是在末尾显示图片
          trailing: Image.asset(images),
        ),

        //这个是实现标题和结尾显示文字
        ListTile(
          //给标题加入图片
          leading: Image.asset(images),
          title: Text('这个是显示图片'),
          subtitle: Image.asset(images),
          // 这个是在末尾显示图片
          trailing: Text("这个是测试文本"),
        ),

        //这个是实现标题和结尾显示文字
        ListTile(
          //给标题加入图片
          leading: Text("这个是开头显示文字"),
          title: Text('这个是显示图片我是标题'),
          subtitle: Image.asset(images),
          // 这个是在末尾显示图片
          trailing: Text("这个是测试文本"),
        ),
      ],
    );
  }
}

///列表展示(垂直图文列表)
// ignore: must_be_immutable
class HomeContent7 extends StatelessWidget {
  //定义图片位置
  var images = 'images/1.jpg';

  @override
  Widget build(BuildContext context) {
    return ListView(
      //设置边距
      padding: EdgeInsets.all(10.0),
      children: <Widget>[
        //显示多张图片
        Image.asset(images),
        //设置图片间的间距,实现方法一
        Container(
          child: Text(
            "这个是加入的文字这个是加入的文字这个是加入的文字加入的文字(自适应的)",
            //设置文字的显示方向
            textAlign: TextAlign.right,
            //设置文字的样式
            style: TextStyle(
              //设置文字的大小
              fontSize: 10.0,
              //设置文字的颜色
              color: Colors.red,
            ),
          ),
        ),
        Image.asset(images),
        //设置图片间的间距,实现方法二
        Container(
          child: Text(
            "这个是加入的文字这个是加入的文字这个是加入的文字加入的文字(自适应的)",
            //设置文字的显示方向
            textAlign: TextAlign.right,
            //设置文字的样式
            style: TextStyle(
              //设置文字的大小
              fontSize: 10.0,
              //设置文字的颜色
              color: Colors.blue,
            ),
          ),
          //设置高度
          height: 40.0,
          //设置我文字上下间距
          padding: EdgeInsets.all(10.0),
        ),
        Image.asset(images),
      ],
    );
  }
}

///水平列表
// ignore: must_be_immutable
class HomeContent8 extends StatelessWidget {
  //定义图片位置
  var images = 'images/1.jpg';

  @override
  Widget build(BuildContext context) {
    //包含在Container的原因是因为方便配置水平列表的高度和
    return Container(
      //设置容器的高度
      height: 150.0,
      child: ListView(
        //设置为垂直列表,默认为vertical ,vertical是垂直列表,不需要设置
        scrollDirection: Axis.horizontal,

        children: <Widget>[
          Container(
            //宽度
            width: 100.0,
            //高度可以不设置(可以自适应)
            height: 100.0,
            //颜色
            color: Colors.amberAccent,
          ),

          ///文本和图片的嵌套
          Container(
            width: 100.0,
            color: Colors.red,
            //在水平列表中显示图片
            child: ListView(
              children: <Widget>[
                //显示图片(可以设置图片的样式信息)
                Image.asset(
                  images,
                  fit: BoxFit.cover,
                ),
                //显示文本(可以设置文字的样式信息)
                Text(
                  "我是测试文本",
                  style: TextStyle(
                    color: Colors.amber,
                  ),
                ),
              ],
            ),
          ),
          Container(
            width: 100.0,
            color: Colors.purple,
          ),
          Container(
            width: 100.0,
            color: Colors.black,
          ),
          Container(
            width: 100.0,
            color: Colors.tealAccent,
          ),
        ],
      ),
    );
  }
}

///动态列表
class HomeContent9 extends StatelessWidget {
  ///自定义方法(模拟的数组类型数据) <Widget>表示返回的必须是一个组件
  ///方法前加入 _ 表示只能在本类使用
  List<Widget> _getlist() {
    return [
      ListTile(
        title: Text("测试文本"),
      ),
      ListTile(
        title: Text("测试文本"),
      ),
      ListTile(
        title: Text("测试文本"),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      //调用私有方法展示数据
      children: this._getlist(),
    );
  }
}

///动态列表(循环遍历 1)
class HomeContent10 extends StatelessWidget {
  List<Widget> _getlist() {
    List<Widget> list = List();
//循环一个数组,
    for (var i = 0; i < 21; i++) {
      list.add(ListTile(
        title: Text("我是第 $i 个列表"),
      ));
    }
    return list.toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      //调用私有方法展示数据
      children: this._getlist(),
    );
  }
}

///动态列表(模拟网络请求数组处理)
class HomeContent11 extends StatelessWidget {
  List<Widget> _getlist() {
    var templist = listData.map((e) =>
        ListTile(
          //或者标题
          title: Text(e["title"]),
          //获取远程图片,并在列表开头显示
          leading: Image.network(e["imageUrl"]),
          //获取本地图片,并在列表后面显示
          trailing: Image.asset("images/1.jpg"),
          subtitle: Text(e["author"]),
        ));
    //原数据为('1231','1313') 不是一个Widget 需要加入 toList 进行转换
    return templist.toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      //调用私有方法展示数据
      children: this._getlist(),
    );
  }
}

/// 循环遍历数组 使用ListView.builder
// ignore: must_be_immutable
class HomeContent12 extends StatelessWidget {
  List list = List();

  ///构造函数
  HomeContent12() {
    for (var i = 0; i < 20; i++) {
      // this.list.add(ListTile(
      //       title: Text('我是第 $i 个列表'),
      //     )
      this.list.add("我是第 $i 个数据");
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      //声明list的长度
      itemCount: this.list.length,
      //index: 索引值
      itemBuilder: (context, index) {
        // return this.list[index];
        return ListTile(
          title: Text(this.list[index]),
        );
      },
    );
  }
}

/// 循环遍历数组 (模拟网络传递数据遍历)使用ListView.builder
// ignore: must_be_immutable
class HomeContent13 extends StatelessWidget {
  Widget _getlist(context, index) {
    return ListTile(
      title: Text(listData[index]["title"]),
      subtitle: Text(listData[index]["author"]),
      leading: Image.network(listData[index]["imageUrl"]),
      trailing: Image.asset("images/1.jpg"),
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      //声明list的长度
        itemCount: listData.length,
        itemBuilder: this._getlist);
  }
}

///网格布局[静态网络布局]
class HomeContent14 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final images = 'images/1.jpg';
    return GridView.count(
      //表示网格的列数
      crossAxisCount: 2,
      children: <Widget>[
        Text("这个是测试文本"),
        Text("这个是测试文本"),
        Text("这个是测试文本"),
        Text("这个是测试文本"),
        Image.asset(images),
        Image.asset(images),
        Image.asset(images)
      ],
    );
  }
}

///网格布局
class HomeContent15 extends StatelessWidget {
  //自定义方法
  List<Widget> _getlist() {
    //创建list集合
    List<Widget> list = List();
    for (int i = 0; i < 20; i++) {
      list.add(Container(
        //对齐方式
        alignment: Alignment.center,
        child: Text(
          "这个是显示的数据第$i 条",
          //字体样式风格
          style: TextStyle(
            color: Colors.purple,
            fontSize: 20.0,
          ),
        ),
        //外层容器样式风格
        color: Colors.amberAccent,
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      //控制和主容器的距离
      padding: EdgeInsets.all(10.0),
      //表示网格的列数
      crossAxisCount: 3,
      //控制左右间距
      crossAxisSpacing: 1.0,
      //控制上下间距

      ///子Widget 的高度,在外层设置高度没有反应是因为外层的高度是有内部的子Widget决定的
      ///[宽度和高度的比例及为所设置的数值]
      childAspectRatio: 0.7,

      mainAxisSpacing: 2.0,
      //调用自定义方法
      children: this._getlist(),
    );
  }
}

///网格布局(调用外部数据显示)[静态网格布局]
class HomeContent16 extends StatelessWidget {
  final images = 'images/1.jpg';

  List<Widget> _getlistdata() {
    var templist = listData.map(
          (e) =>
          Container(
            //alignment: Alignment.center,
            //Colum 表示将元素竖着排列
            child: Column(
              children: <Widget>[
                //设置高度(图片和文字距离)
                SizedBox(
                  height: 10.0,
                ),
                //拿的本地图片显示
                Image.asset(images),
                //获取远程获取的图片
                //Image.network(e['imageUrl']),
                Text(
                  e['title'],
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    color: Colors.pink,
                    fontSize: 18.0,
                  ),
                ),
                Text(e['author']),
              ],
            ),

            ///设置边框
            decoration: BoxDecoration(
                border: Border.all(
                  //color: Colors.yellow,
                  color: Color.fromRGBO(233, 233, 233, 0.9),
                  width: 1.0,
                )),
          ),
    );
    return templist.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      //控制和主容器的距离
      padding: EdgeInsets.all(10.0),
      //表示网格的列数
      crossAxisCount: 2,
      //控制左右间距
      crossAxisSpacing: 0.5,
      //控制上下间距

      ///子Widget 的高度,在外层设置高度没有反应是因为外层的高度是有内部的子Widget决定的
      ///[宽度和高度的比例及为所设置的数值]

      //childAspectRatio: 0.7,

      mainAxisSpacing: 1.0,
      //调用自定义方法
      children: this._getlistdata(),
    );
  }
}

///网格布局(调用外部数据显示)[动态网格布局]
class HomeContent17 extends StatelessWidget {
  final images = 'images/1.jpg';

  Widget _getlistdata(context, index) {
    return Container(
      child: Column(
        children: <Widget>[
          //设置高度(图片和文字距离)
          SizedBox(
            height: 10.0,
          ),
          //拿的本地图片显示
          Image.asset(images),
          //获取远程获取的图片
          //Image.network(listData[index]['imageUrl']),
          Text(
            listData[index]['title'],
            textAlign: TextAlign.left,
            style: TextStyle(
              color: Colors.pink,
              fontSize: 18.0,
            ),
          ),
          Text(listData[index]['author']),
        ],
      ),

      ///设置边框
      decoration: BoxDecoration(
          border: Border.all(
            //color: Colors.yellow,
            color: Color.fromRGBO(233, 233, 233, 0.9),
            width: 1.0,
          )),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          //表示网格的列数
          crossAxisCount: 2,
          //控制左右间距
          crossAxisSpacing: 0.1,
          //控制上下间距
          ///子Widget 的高度,在外层设置高度没有反应是因为外层的高度是有内部的子Widget决定的
          ///[宽度和高度的比例及为所设置的数值]
          childAspectRatio: 1.0,
          //垂直的距离
          mainAxisSpacing: 1.0,
        ),

        //指定循环的数量
        itemCount: listData.length,
        itemBuilder: this._getlistdata);
  }
}

///panding 组件的使用
class HomeContent18 extends StatelessWidget {
  final images = 'images/1.jpg';

  @override
  Widget build(BuildContext context) {
    //实现右边间距
    //在最外层设置边距
    return Padding(
      padding: EdgeInsets.fromLTRB(0, 0, 20, 20),
      child: GridView.count(
        //设置显示几列
        crossAxisCount: 2,
        //配置图片的宽高比例
        childAspectRatio: 1.7,

        //子组件
        children: <Widget>[
          Padding(
            //这个只能设置上左
            padding: EdgeInsets.fromLTRB(20, 20, 0, 0),
            child: Image.asset(
              images,
              fit: BoxFit.cover,
            ),
          ),
          //加载本地图片 图片填充前
          Image.asset(images),
          //图片填充后
          Image.asset(
            images,
            fit: BoxFit.cover,
          ),
          Image.asset(
            images,
            fit: BoxFit.cover,
          ),
          Image.asset(
            images,
            fit: BoxFit.cover,
          ),
          Image.network(
            "https://assets.gitee.com/assets/favicon-9007bd527d8a7851c8330e783151df58.ico",
            fit: BoxFit.cover,
          ),
        ],
      ),
    );
  }
}

///ROW 水平布局组件的使用
class HomeContent19 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      //定义容器的高度,宽度和颜色
      height: 600.0,
      width: 400.0,
      color: Colors.cyan,
      child: Row(

        ///水平排列设置
        ///参数如下:
        ///spaceEvenly 均匀分配位置
        ///center 居中显示
        ///end 最右侧显示
        ///spaceAround  周围的位置相同
        ///spaceBetween 中间的位置相同
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,

        ///横轴对齐
        ///
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          IconContext(
            Icons.add_a_photo,
            color: Colors.amber,
          ),
          IconContext(
            Icons.ac_unit,
            color: Colors.pink,
          ),
          IconContext(
            Icons.account_balance_wallet,
            color: Colors.teal,
          ),
        ],
      ),
    );
  }
}

//自定义组件
// ignore: must_be_immutable
class IconContext extends StatelessWidget {
  //定义常量并赋初始值
  double size = 23.0;
  Color color = Colors.blue;
  IconData icon;

  //构造函数
  IconContext(this.icon, {this.color, this.size});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100.0,
      width: 100.0,
      color: this.color,
      child: Center(
        child: Icon(
          //图标
          this.icon,
          //大小
          size: this.size,
          //颜色
          color: Colors.deepPurple,
        ),
      ),
    );
  }
}

///Column 垂直布局组件的使用
class HomeContent20 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      //定义容器的高度,宽度和颜色
      height: 600.0,
      width: 300.0,
      color: Colors.cyan,
      child: Column(

        ///用法与水平参数一致
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          IconContext(
            Icons.add_a_photo,
            color: Colors.amber,
          ),
          IconContext(
            Icons.ac_unit,
            color: Colors.pink,
          ),
          IconContext(
            Icons.account_balance_wallet,
            color: Colors.teal,
          ),
        ],
      ),
    );
  }
}

///展开式的布局[可以只设置一个,另外一个自适应]
class HomeContent21 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: <Widget>[
          Expanded(
            //所占用的份数
              flex: 1,
              child: IconContext(
                Icons.add_a_photo,
                color: Colors.amber,
              )),
          Expanded(
            flex: 2,
            child: IconContext(
              Icons.ac_unit,
              color: Colors.pink,
            ),
          ),
          Expanded(
            flex: 1,
            child: IconContext(
              Icons.account_balance_wallet,
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}

///结合以上实现的小Demo  需要注意的地方为,每一个容器(Container) 都需要设置高度否则会导致溢出
/// 高度和宽度一定要分清楚
class HomeContent22 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final images = 'images/1.jpg';
    return Column(
      children: <Widget>[
        Row(
          children: [
            Expanded(
              child: Container(
                  height: 180,
                  color: Colors.purple,
                  child: Container(
                    child: Image.asset(images, fit: BoxFit.cover),
                  )),
            ),
          ],
        ),
        SizedBox(
          height: 10.0,
        ),
        Row(
          children: [
            Expanded(
              flex: 2,
              child: Container(
                  height: 180.0, child: Image.asset(images, fit: BoxFit.cover)),
            ),
            //设置间距,不能设置高度
            SizedBox(width: 5.0),
            Expanded(
              flex: 1,
              child: Container(
                height: 180.0,
                child: ListView(
                  children: [
                    Container(
                      height: 90.0,
                      child: Image.asset(images),
                    ),

                    ///设置间距
                    SizedBox(width: 10.0),
                    Container(
                      height: 90.0,
                      child: Image.asset(images),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }
}

///定位单个元素
class HomeContent23 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        //让全部内容都居中
        //alignment: Alignment.center,
        //第二种写法
        alignment: Alignment(0, 0),

        children: [
          Container(
            height: 400.0,
            width: 300.0,
            color: Colors.pink,
          ),
          Text(
            '测试Stack布局',
            style: TextStyle(fontSize: 18.0, color: Colors.yellow),
          ),
        ],
      ),
    );
  }
}

///定位多个元素 Stack结合Align 机进行定位
class HomeContent24 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 400.0,
        width: 300.0,
        color: Colors.pink,
        child: Stack(
          children: [
            Align(
              alignment: Alignment.bottomLeft,
              child: Icon(
                Icons.add,
                size: 50.0,
                color: Colors.white,
              ),
            ),
            Align(
              alignment: Alignment.center,
              child: Icon(
                Icons.accessible,
                size: 50.0,
                color: Colors.purple,
              ),
            ),
            Align(
              alignment: Alignment.topLeft,
              child: Icon(
                Icons.ac_unit,
                size: 50.0,
                color: Colors.lightBlueAccent,
              ),
            ),
            Align(
              alignment: Alignment.topCenter,
              child: Icon(
                Icons.account_balance_wallet,
                size: 50.0,
                color: Colors.amber,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

///定位多个元素 Stack结合Positioned 机进行定位
class HomeContent25 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 400.0,
        width: 300.0,
        color: Colors.pink,
        child: Stack(
          children: [
            Positioned(
              left: 10.0,
              child: Icon(
                Icons.add,
                size: 50.0,
                color: Colors.white,
              ),
            ),
            Positioned(
              top: 180.0,
              child: Icon(
                Icons.accessible,
                size: 50.0,
                color: Colors.purple,
              ),
            ),
            Positioned(
              right: 10.0,
              child: Icon(
                Icons.ac_unit,
                size: 50.0,
                color: Colors.lightBlueAccent,
              ),
            ),
            Positioned(
              bottom: 10.0,
              child: Icon(
                Icons.account_balance_wallet,
                size: 50.0,
                color: Colors.amber,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

///组件显示所占的宽高比
class HomeContent26 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ///显示在容器里面的宽高比
    // return Container(
    //   width: 300.0,
    //   //配置卡拍的长宽比
    //   child: AspectRatio(
    //     aspectRatio: 2.0/1.0,
    //     child: Container(
    //       color: Colors.purple,
    //     ),
    //   ),
    // );
    ///在整个屏幕的宽高比
    return AspectRatio(
      aspectRatio: 2 / 1,
      child: Container(
        color: Colors.lightBlueAccent,
      ),
    );
  }
}

///卡片布局
class HomeContent27 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //列表显示
    return ListView(
      children: [
        //卡片布局
        Card(
          //外边距设置
          margin: EdgeInsets.all(10.0),
          //Colum 列组件
          child: Column(
            children: [
              //列表图块
              ListTile(
                //文本控件
                title: Text(
                  'Colum 是个列组件',
                  style: TextStyle(fontSize: 28.0, color: Colors.amber),
                ),
                //副标题
                subtitle: Text('subtitle 是副标题'),
              ),
            ],
          ),
        ),
        Card(
          //外边距设置
          margin: EdgeInsets.all(10.0),
          //Colum 列组件
          child: Column(
            children: [
              ListTile(
                title: Text(
                  'Colum 是个列组件',
                  style: TextStyle(fontSize: 28.0, color: Colors.amber),
                ),
                subtitle: Text('subtitle 是副标题'),
              ),
              ListTile(
                title: Text(
                  'Colum 是个列组件',
                  style: TextStyle(fontSize: 28.0, color: Colors.purple),
                ),
                subtitle: Text('subtitle 是副标题'),
              ),
              ListTile(
                title: Text(
                  'Colum 是个列组件',
                  style: TextStyle(fontSize: 28.0, color: Colors.pink),
                ),
                subtitle: Text('subtitle 是副标题'),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

///卡片布局(图文卡片的实现)
class HomeContent28 extends StatelessWidget {
  final images = 'images/1.jpg';

  @override
  Widget build(BuildContext context) {
    //列表显示
    return ListView(
      children: [
        Card(
          margin: EdgeInsets.all(10.0),
          child: Column(
            children: [
              AspectRatio(
                //设置所占的宽高比
                aspectRatio: 16 / 9,
                child: Image.asset(
                  images,
                  //设置图片铺满容器
                  fit: BoxFit.cover,
                ),
              ),
              ListTile(

                ///实现图片圆形的方法一:
                leading: ClipOval(
                  child: Image.asset(
                    images,
                    fit: BoxFit.cover,
                    height: 60,
                    width: 60,
                  ),
                ),
                title: Text('这个是标题'),
                subtitle: Text(
                  'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx性性信',
                  //设置字体过多缩略
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          ),
        ),
        Card(
          margin: EdgeInsets.all(10.0),
          child: Column(
            children: [
              AspectRatio(
                //设置所占的宽高比
                aspectRatio: 16 / 9,
                child: Image.network(
                  "",
                  fit: BoxFit.cover,
                ),
              ),
              ListTile(

                ///实现图片圆形的方法二:
                leading: CircleAvatar(
                  //加载远程图片转换为头像
                  //backgroundImage: NetworkImage(""),

                  //加载本地图片为头像
                  backgroundImage: AssetImage(images),
                ),
                title: Text('这个是标题'),
                subtitle: Text(
                  'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx性性信',
                  //设置字体过多缩略
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

///卡片布局(模拟远程数据调用)
class HomeContent29 extends StatelessWidget {
  final images = 'images/1.jpg';

  @override
  Widget build(BuildContext context) {
    //列表显示
    return ListView(
      children: listData
          .map(
            (e) =>
        //返回一个Card组件
        Card(
          margin: EdgeInsets.all(10.0),
          child: Column(
            children: [
              AspectRatio(
                //设置所占的宽高比
                aspectRatio: 16 / 9,

                child: Image.network(
                  e["imageUrl"],
                  //设置图片显示
                  fit: BoxFit.cover,
                ),
              ),
              ListTile(

                ///实现图片圆形的方法二:
                leading: CircleAvatar(
                  //加载本地图片为头像
                  backgroundImage: NetworkImage(e["imageUrl"]),
                ),
                title: Text(
                  e["title"],
                  overflow: TextOverflow.ellipsis,
                ),
                subtitle: Text(
                  e["author"],
                  //设置字体过多缩略
                  overflow: TextOverflow.ellipsis,
                  //设置文字显示行数
                  maxLines: 2,
                ),
              ),
            ],
          ),
        ),
      )
          .toList(),
    );
  }
}

///Wrap实现按钮的流布局
class HomeContent30 extends StatelessWidget {
  final images = 'images/1.jpg';

  @override
  Widget build(BuildContext context) {
    //调用自定义的按钮组件
    return Container(
      height: 400.0,
      width: 400.0,
      color: Colors.pink,
      //设置边距
      padding: EdgeInsets.all(10.0),
      child: Wrap(
        //X轴的距离
        spacing: 10.0,
        //y轴的距离
        runSpacing: 10.0,

        //竖着排列
        direction: Axis.vertical,

        //runAlignment: WrapAlignment.end,
        children: [
          MyButton('这个是封装'),
          MyButton('这个是按钮组件'),
          MyButton('钮组件'),
          MyButton('组件'),
          MyButton('这个是封件'),
          MyButton('这个是封组件'),
          MyButton('这个是封按钮组件'),
        ],
      ),
    );
  }
}

///封装的按钮组件方法
class MyButton extends StatelessWidget {
  final String text;

  const MyButton(this.text, {Key key});

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      //调用主题
      textColor: Theme
          .of(context)
          .accentColor,

      child: Text(this.text),
      onPressed: () {},
    );
  }
}

///================================有状态组件=================================
class HomeContent31 extends StatefulWidget {
  HomeContent31({Key key}) : super(key: key);

  _HomeContent31 createState() => _HomeContent31();
}

class _HomeContent31 extends State<HomeContent31> {
  int countNum = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Chip(
          label: Text('我是有状态的组件'),
        ),
        Chip(
          label: Text('$countNum'),
        ),
        //凸起的按钮
        RaisedButton(
          child: Text('我是凸起的按钮,点击我数量加一',
              style: TextStyle(color: Colors.lightBlueAccent)),
          //点击按钮的监听事件
          onPressed: () {
            //这个方法只有State 里面才存在
            //设定状态
            setState(() {
              this.countNum++;
            });
          },
        ),
        RaisedButton(
          child: Text('我是凸起的按钮,点击我数量减一', style: TextStyle(color: Colors.pink)),
          //点击按钮的监听事件
          onPressed: () {
            //这个方法只有State 里面才存在
            //设定状态
            setState(() {
              this.countNum--;
            });
          },
        ),
      ],
    );
  }
}

///实现动态列表
class HomeContent32 extends StatefulWidget {
  ///可以不这样写,理解很费劲不知道谁调用了谁,效果一致没有语法问题
  //HomeContent32({Key key}) :super(key: key);
// _HomeContent32 createState()=>_HomeContent31();
  @override
  State<StatefulWidget> createState() {
    return _HomeContent32();
  }
}

class _HomeContent32 extends State<HomeContent32> {
  List list = List();

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Column(
            children: this
                .list
                .map(
                  (e) =>
                  ListTile(
                    title: Text(e),
                  ),
            )
                .toList()),
        //设置间隔
        SizedBox(
          height: 20.0,
        ),
        //悬浮按钮
        RaisedButton(
          child: Text('我是悬浮按钮'),
          //按钮监听
          onPressed: () {
            setState(() {
              list.add('我是第一个');
            });
          },
        ),
      ],
    );
  }
}


